<template>
    <div class="logis">
        <div class="nav-title">
            <img src="@/img/pic3.jpg">
            <h1>物业与物流</h1>
        </div>
    </div>
    <div class="logshop">
        <ul>
            <li v-for="(item,index) in mtype" :key="item.id" @click="pagefun(index)">
                <p v-html="icons[index]"></p>
                <span>{{ item.mname }}</span>
            </li>
        </ul>
        <div class="logwrap">
            <div :class="pagenum==index?'active':''" v-for="item,index in mflow" :key="item.id">
             <h1>{{item.title}}</h1>
                <p>{{item.detail}}</p>
            </div>
            <span  class="qqbtn" @click="qqfun"><img src="@/img/qq.png">在线询价 ></span>
        </div>
    </div>
</template>
<script>
import {toRefs,reactive,onMounted,getCurrentInstance } from 'vue'
export default {
    setup(){
        const data = reactive({
            pagenum:0,
            icons:[
                '<svg t="1749905017615" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="13846" width="200" height="200"><path d="M663.8592 272.384c-6.9632 0-11.5968-5.4528-11.5968-13.5936V163.6864H350.3616v95.0784c0 8.1664-4.6336 13.5936-11.5968 13.5936s-11.6224-5.4272-11.6224-13.568V150.0928c0-8.1664 4.6592-13.5936 11.6224-13.5936h325.12c6.9376 0 11.5968 5.4272 11.5968 13.568v108.672c0 8.1664-4.6592 13.5936-11.6224 13.5936z" p-id="13847" fill="#2c2c2c"></path><path d="M454.8096 272.384c-6.9632 0-11.5968-5.4528-11.5968-13.5936V150.1184c0-8.1664 4.608-13.5936 11.5968-13.5936 6.9632 0 11.6736 5.4272 11.6736 13.568v108.672c0 8.1664-4.6592 13.5936-11.6224 13.5936h-0.0512z" p-id="13848" fill="#2c2c2c"></path><path d="M710.272 544.0256c-6.9632 0-11.6224-5.4272-11.6224-13.568V272.3584h-394.752v258.0992c0 8.1408-4.6592 13.568-11.6224 13.568s-11.6224-5.4272-11.6224-13.568V258.7904c0-8.1664 4.608-13.568 11.5968-13.568h418.0224c6.9632 0 11.5968 5.4016 11.5968 13.568V530.432c0 8.1408-4.6336 13.568-11.5968 13.568z m62.208 348.1344c-39.6288 0-56.6528-16.3072-76.4672-29.8752-16.9984-13.5936-28.3392-24.4736-56.6528-24.4736-28.3392 0-42.496 10.8544-56.6784 24.4736-16.9984 13.568-36.8384 29.8752-76.4928 29.8752s-56.6528-16.3072-76.4928-29.8752c-16.9984-13.5936-28.3392-24.4736-56.6528-24.4736-28.3392 0-42.496 10.8544-56.6784 24.4736-16.9984 13.568-36.8384 29.8752-76.4928 29.8752s-56.6528-16.3072-76.4928-29.8752c-16.9984-13.5936-28.3392-24.4736-56.6528-24.4736-8.4992 0-14.1824-5.4272-14.1824-13.568 0-8.1408 5.6832-13.568 14.1824-13.568 39.68 0 56.6528 16.2816 76.4928 29.8752 16.9984 13.568 28.3136 24.448 56.6528 24.448s42.496-10.8288 56.6784-24.448c16.9984-13.568 36.8128-29.9008 76.4928-29.9008s56.6528 16.3072 76.4672 29.9008c16.9984 13.568 28.3392 24.448 56.6784 24.448s42.496-10.8288 56.6528-24.448c16.9984-13.568 36.864-29.9008 76.4928-29.9008 39.68 0 56.6784 16.3072 76.4928 29.9008 16.9984 13.568 28.3392 24.448 56.6528 24.448 28.3392 0 42.496-10.8288 56.6784-24.448 16.9984-13.568 36.8384-29.9008 76.4928-29.9008 8.4992 0 14.1568 5.4528 14.1568 13.568 0 8.192-5.6576 13.6192-14.1568 13.6192-28.3392 0-42.496 10.8288-56.6784 24.448-16.9984 13.568-36.8128 29.8752-76.4672 29.8752z" p-id="13849" fill="#2c2c2c"></path><path d="M774.9376 825.856c-39.6544 0-56.6528-16.2816-76.4672-29.8752-16.9984-13.568-28.3392-24.448-56.6784-24.448s-42.496 10.8288-56.6528 24.448c-16.9984 13.5936-36.8384 29.9008-76.4928 29.9008-39.68 0-56.6784-16.3072-76.4928-29.9008-16.9984-13.568-28.3392-24.448-56.6784-24.448s-42.496 10.8288-56.6528 24.448c-16.9984 13.5936-36.8384 29.9008-76.4928 29.9008-36.8384 0-56.6784-16.3072-76.4928-29.9008-16.9984-13.568-28.3392-24.448-56.6784-24.448-8.4992 0-14.1568-5.4272-14.1568-13.568 0-8.1664 5.6576-13.568 14.1568-13.568 36.864 0 56.6784 16.2816 76.4928 29.8496 16.9984 13.5936 28.3392 24.4736 56.6784 24.4736s42.496-10.8544 56.6528-24.4736c16.9984-13.568 36.8384-29.8752 76.4928-29.8752 39.68 0 56.6784 16.3072 76.4928 29.8752 16.9984 13.5936 28.3392 24.4736 56.6528 24.4736 28.3392 0 42.496-10.8544 56.6784-24.4736 16.9984-13.568 36.8384-29.8752 76.4928-29.8752 39.68 0 56.6528 16.3072 76.4928 29.8752 16.9984 13.5936 28.3136 24.4736 56.6528 24.4736s42.496-10.8544 56.6784-24.4736c16.9728-13.568 36.8128-29.8752 76.4928-29.8752 8.4992 0 14.1568 5.4272 14.1568 13.568 0 8.192-5.6576 13.5936-14.1568 13.5936-28.3392 0-42.496 10.8288-56.6784 24.448-16.9984 13.5936-36.8384 29.9008-76.4928 29.9008z" p-id="13850" fill="#2c2c2c"></path><path d="M769.5616 809.8304h-7.3728c-11.0336-2.56-14.72-10.2656-11.0336-17.9712l139.9808-215.424-379.4432-61.5424-379.4176 58.9824 139.9808 217.9584c3.6608 7.68 0 12.8256-11.0592 17.9712-11.0592 2.56-18.432 0-25.7792-7.68L88.064 571.2896a6.144 6.144 0 0 1 0-10.24l11.0592-7.7056L504.32 489.216h7.3728l405.2224 64.128c3.6864 0 11.0592 2.56 11.0592 7.68 0 5.12 3.6608 7.68 0 10.2656l-147.3536 230.8352c3.6864 5.12-3.6864 7.68-11.0592 7.68z" p-id="13851" fill="#2c2c2c"></path><path d="M511.0272 798.1824c-6.9888 0-11.6224-4.1728-11.6224-10.3168v-206.5408c0-6.1952 4.6336-10.3168 11.6224-10.3168 6.9632 0 11.5968 4.1472 11.5968 10.3168v206.5408c0 6.1952-4.608 10.3168-11.5968 10.3168z m199.2448-417.152H292.3008c-6.9632 0-11.5968-5.4528-11.5968-13.5936 0-8.1664 4.6336-13.568 11.5968-13.568h417.9712c6.9632 0 11.5968 5.4016 11.5968 13.568 0 8.1408-4.6336 13.568-11.5968 13.568z m0 108.672H292.3008c-6.9632 0-11.5968-5.4272-11.5968-13.568 0-8.1664 4.6336-13.5936 11.5968-13.5936h417.9712c6.9632 0 11.5968 5.4272 11.5968 13.568 0 8.1664-4.6336 13.5936-11.5968 13.5936z" p-id="13852" fill="#2c2c2c"></path><path d="M385.2032 530.4576c-6.9632 0-11.5968-5.4272-11.5968-13.568V258.7648c0-8.1664 4.6336-13.568 11.5968-13.568s11.6224 5.4016 11.6224 13.568v258.048c0 8.1664-4.6592 13.5936-11.6224 13.5936v0.0256z m116.1216-54.3232c-6.9632 0-11.6224-5.4528-11.6224-13.5936v-203.776c0-8.1408 4.6336-13.568 11.6224-13.568 6.9632 0 11.6224 5.4272 11.6224 13.568v203.776c0 8.1408-4.6592 13.568-11.6224 13.568z m92.8768 40.704c-6.9632 0-11.5968-5.4272-11.5968-13.568v-244.48c0-8.1664 4.6336-13.568 11.5968-13.568s11.6224 5.4016 11.6224 13.568v244.48c0 8.192-4.6336 13.5936-11.6224 13.5936z" p-id="13853" fill="#2c2c2c"></path></svg>',
                '<svg t="1749905078359" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="14895" width="200" height="200"><path d="M764.342857 815.542857c14.628571 0 25.6 14.628571 25.6 29.257143s-10.971429 29.257143-25.6 29.257143H201.142857c-14.628571 0-25.6-14.628571-25.6-29.257143s10.971429-29.257143 25.6-29.257143h563.2zM182.857143 182.857143c10.971429 0 21.942857 3.657143 32.914286 7.314286l354.742857 201.142857 168.228571-80.457143c29.257143-18.285714 62.171429-25.6 95.085714-25.6 21.942857 0 47.542857 3.657143 69.485715 10.971428 47.542857 18.285714 84.114286 51.2 106.057143 98.742858 3.657143 10.971429 3.657143 25.6 0 36.571428-3.657143 10.971429-14.628571 21.942857-25.6 25.6l-771.657143 292.571429c-3.657143 3.657143-10.971429 3.657143-14.628572 3.657143-14.628571 0-25.6-7.314286-36.571428-18.285715L40.228571 585.142857c-10.971429-10.971429-14.628571-29.257143-10.971428-43.885714-3.657143-10.971429 7.314286-21.942857 21.942857-29.257143 3.657143-3.657143 10.971429-3.657143 18.285714-3.657143 10.971429 0 18.285714 3.657143 25.6 7.314286l95.085715 51.2 128-69.485714-182.857143-219.428572c-14.628571-10.971429-18.285714-29.257143-14.628572-47.542857 3.657143-21.942857 18.285714-36.571429 40.228572-43.885714 7.314286-3.657143 14.628571-3.657143 21.942857-3.657143z m0 58.514286s-3.657143 0 0 0c-3.657143 0-3.657143 0 0 0l179.2 219.428571 47.542857 54.857143-65.828571 32.914286-128 73.142857-29.257143 14.628571-25.6-14.628571-51.2-29.257143L190.171429 694.857143l749.714285-285.257143c-14.628571-25.6-36.571429-43.885714-62.171428-54.857143-14.628571-7.314286-32.914286-7.314286-47.542857-7.314286-25.6 0-47.542857 7.314286-69.485715 18.285715l-168.228571 80.457143-29.257143 14.628571-25.6-14.628571L182.857143 241.371429z" fill="#2c2c2c" p-id="14896"></path></svg>',
                '<svg t="1749905118279" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="16103" width="200" height="200"><path d="M932.992 307.84l87.68 176.512a32.981333 32.981333 0 0 1 3.328 14.592v258.261333a59.306667 59.306667 0 0 1-59.306667 59.306667h-54.613333a129.194667 129.194667 0 0 1-253.013333 0H411.221333a129.194667 129.194667 0 0 1-253.013333 0h-61.013333a85.674667 85.674667 0 0 1-82.346667-109.226667l50.389333-176.128h-12.373333a32.938667 32.938667 0 0 1 0-65.92h31.274667l30.293333-105.813333H64.64a32.938667 32.938667 0 1 1 0-65.834667h68.693333l28.501334-99.712H133.546667A32.938667 32.938667 0 1 1 133.546667 128h511.189333a85.632 85.632 0 0 1 83.2 105.984l-6.4 26.325333h134.741333a85.205333 85.205333 0 0 1 76.714667 47.530667z m24.32 197.034667l-83.285333-167.68a19.669333 19.669333 0 0 0-17.749334-10.965334h-23.04v178.645334h124.117334z m-517.717333-51.797334l68.650666-259.157333-108.842666-0.042667-68.693334 258.176 108.885334 1.024z m-361.386667 272.384a19.413333 19.413333 0 0 0 3.242667 17.322667 19.413333 19.413333 0 0 0 15.786666 7.850667h64.597334a129.109333 129.109333 0 0 1 245.888 0h126.293333L663.893333 218.368a19.754667 19.754667 0 0 0-19.2-24.448H576.426667l-79.658667 300.757333a32.938667 32.938667 0 0 1-31.829333 24.490667h-0.298667l-176.938667-1.578667a32.938667 32.938667 0 0 1-31.573333-41.386666l75.093333-282.282667H230.4L78.208 725.461333z m161.792 109.525334a63.36 63.36 0 1 0 89.6-89.6 63.36 63.36 0 0 0-89.6 89.6z m498.858667 0a63.36 63.36 0 1 0 89.514666-89.6 63.36 63.36 0 0 0-89.514666 89.6z m97.493333-162.816a129.152 129.152 0 0 1 70.272 78.464h51.626667v-179.882667h-157.994667a32.938667 32.938667 0 0 1-32.938667-32.938667v-211.626666h-61.909333l-103.68 424.448h59.008a129.152 129.152 0 0 1 175.616-78.464zM56.277333 137.642667a37.461333 37.461333 0 0 1 4.096 4.992 32.938667 32.938667 0 0 1 5.546667 18.346666 33.578667 33.578667 0 0 1-14.677333 27.392 32.512 32.512 0 0 1-18.346667 5.546667 32.981333 32.981333 0 1 1 23.338667-56.277333z" p-id="16104"></path></svg>',
                '<svg t="1749905149757" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="17185" width="200" height="200"><path d="M868.032 445.44L504.96 177.152 157.312 445.056c-11.584 3.84-20.032 2.368-25.344-4.544-5.312-6.912-5.312-16.448 0-28.544l360.512-279.232a20.672 20.672 0 0 1 24.96 0l374.272 279.232c5.76 12.352 5.76 21.824 0 28.544-5.696 6.656-13.568 8.32-23.68 4.928z" fill="#2c2c2c" p-id="17186"></path><path d="M243.648 895.808a57.344 57.344 0 0 1-57.792-57.344V370.56h41.856v467.968a15.488 15.488 0 0 0 15.936 15.104h535.744a15.488 15.488 0 0 0 15.936-15.104V370.56h41.856v467.968a57.344 57.344 0 0 1-57.344 57.344H243.648z" fill="#2c2c2c" p-id="17187"></path><path d="M712 621.696h-96.64a41.856 41.856 0 0 1-41.92-45.248v-87.04a41.856 41.856 0 0 1 41.856-45.248h96.704a41.856 41.856 0 0 1 41.856 45.248v87.04a41.856 41.856 0 0 1-41.856 45.248z m-96.64-135.68v90.432l96.64 3.392V489.408l-96.64-3.392z m96.64 324.032h-96.64a41.856 41.856 0 0 1-41.92-45.248v-85.376a41.856 41.856 0 0 1 41.856-45.184h96.704a41.856 41.856 0 0 1 41.856 45.184v83.712a41.856 41.856 0 0 1-41.856 46.912z m-96.64-135.68v88.768l96.64 3.392v-87.04l-96.64-5.12zM519.808 812.16H423.68a41.856 41.856 0 0 1-41.856-45.184v-87.488a41.856 41.856 0 0 1 41.856-45.184h96.64a41.856 41.856 0 0 1 41.92 45.184v87.04a41.856 41.856 0 0 1-42.24 45.632zM423.68 676.48v90.432l96.64 3.328v-90.816l-96.64-2.944z" fill="#2c2c2c" p-id="17188"></path></svg>'
            ],
            mtype:[],
            mflow:[]

        })
        const pagefun=(num)=>{
            data.pagenum = num
        }
        const qqfun=()=>{
           window.location.href="tencent://message/?uin=2343645&Menu=yes"; 
        }
        const {proxy}=getCurrentInstance()
        onMounted(async()=>{
            //物流菜单
            await proxy.$axios.get("/api/mtype",{params:{}})
            .then(function(response){
                var arr=JSON.parse(response.data)
                console.log(arr)
                data.mtype=arr
            })
            //物流信息
            await proxy.$axios.get("/api/mflow",{params:{}})
            .then(function(response){
                var arr=JSON.parse(response.data)
                console.log(arr)
                data.mflow=arr
            })

        })
        return {
            ...toRefs(data),pagefun,qqfun
        }
    }
}
</script>
<style scoped>
.logshop{width:90%; margin:0px auto;}
.logshop ul {display: flex;flex:1;width:80%;margin:0px auto;}
.logshop ul li span{font-size:18px;display: block;text-align: center;}
.logshop ul li svg{width:50%;height:auto;}
.logshop ul li{margin:20px 40px;}
.logwrap{width:80%;margin:0px auto;box-shadow:1px 1px 5px#ccc;padding: 30px 20px;}
.logwrap div{font-size:14px;line-height: 25px;display: none;}
.logwrap .active{display:block;}
.qqbtn{display: block;margin: 20px auto;width: 160px;height:50px;text-align: center;
    line-height:50px;background-color:#ccc;font-size:16px;}
.qqbtn img{width:20px;height:20px;}
.qqbtn:hover{background-color:skyblue;color:white;font-size: 18px;}
.logwrap div h1{text-align:center;margin-bottom:20px;}
</style>